<template>
	<view class="bigbox">
		<view class="header">
			<text style="color: dimgrey;margin-bottom: 50rpx;">大学生志愿者活动</text>
		</view>
		<view class="showName">
			<view class="showNameLeft">
				<img class="image1" src="/static/logo.png" />
				<text style="margin-left: 14rpx;">李华</text>
			</view>
			<view class="showNameRight">
				<text class="showNameRightText">></text>
			</view>
		</view>
		<view class="nav1">
			<view class="nav1b1">
				<view class="">
					<img class="image1" src="/static/logo.png" />
				</view>
				<text>认领活动</text>
			</view>
			<view class="nav1b2">
				<view class="">
					<img class="image1" src="/static/logo.png" />
				</view>
				<text>爱心报表</text>
			</view>
			<view class="nav1b3">
				<view class="">
					<img class="image1" src="/static/logo.png" />
				</view>
				<text>服务纪实</text>
			</view>
			<view class="nav1b4">
				<view class="">
					<img class="image1" src="/static/logo.png" />
				</view>
				<text>我的服务</text>
			</view>
		</view>
		<view class="content">
			<view class="c1">
				<text style="margin-left: 20rpx;color: black;">志愿活动</text>
				<text style="margin-right: 20rpx;color: darkgray;">查看更多 ></text>
			</view>
			<view class="c2">
				<view class="c21 c2content">
					<view class="cIT">
						<img class="image1 cml" src="/static/logo.png" />
						<text class="CITtext">&nbsp;进行中&nbsp;</text>
					</view>
					<view class="cText">
						<text class="ch2">运动会志愿者招募</text>
						<text class="cT1">2022-12-20 08:00 至 2022-12-22 04:30</text>
						<view>
							<text class="vt3">&nbsp;本人所在学校活动&nbsp;</text>
						</view>
					</view>
				</view>
				<view class="c22 c2content">
					<view class="cIT">
						<img class="image1 cml" src="/static/logo.png" />
						<text class="CITtext">&nbsp;进行中&nbsp;</text>
					</view>
					<view class="cText">
						<text class="ch2">地铁站进站引导</text>
						<text class="cT1">2022-12-25 08:30 至 2022-12-25 10:30</text>
						<view>
							<text class="vt3">&nbsp;光谷地铁站&nbsp;</text>
						</view>
					</view>
				</view>
				<view class="c23 c2content">
					<view class="cIT">
						<img class="image1 cml" src="/static/logo.png" />
						<text class="CITtext">&nbsp;已结束&nbsp;</text>
					</view>
					<view class="cText">
						<text class="ch2">马拉松招募志愿者</text>
						<text class="cT1">2022-12-20 08:30 至 2022-12-20 10:30</text>
						<view>
							<text class="vt3">&nbsp;中山公园&nbsp;</text>
						</view>
					</view>
				</view>
				<view class="c24 c2content">
					<view class="cIT">
						<img class="image1 cml" src="/static/logo.png" />
						<text class="CITtext">&nbsp;未开始&nbsp;</text>
					</view>
					<view class="cText">
						<text class="ch2">马拉松招募志愿者</text>
						<text class="cT1">2022-12-20 08:00 至 2022-12-20 10:30</text>
						<view>
							<text class="vt3">&nbsp;楚河汉街&nbsp;</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style>
	.bigbox {
		width: 100vw;
		height: 100vh;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		width: 100%;
		height: 180rpx;
		background-color: darkgrey;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
	}

	.showName {
		width: 90%;
		height: 110rpx;
		background-color: aliceblue;
		margin-top: -50rpx;
		border-radius: 14px;
		display: flex;

	}

	.showNameLeft {
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.showNameRight {
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.showNameRightText {
		margin-left: 180rpx;
		font-size: 40rpx;
		color: dimgray;
	}

	.image1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.nav1 {
		width: 90%;
		height: 150rpx;
		background-color: aliceblue;
		border-radius: 14px;
		margin-top: 16rpx;
		display: flex;
	}

	.nav1b1,
	.nav1b2,
	.nav1b3,
	.nav1b4 {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.content {
		margin-top: 40rpx;
		width: 100%;
		min-height: calc(100vh - 480rpx);
		background-color: aliceblue;
		display: flex;
		flex-direction: column;
	}

	.c1 {
		width: 100%;
		height: 6%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #eee;
	}

	.c2 {
		width: 100%;
		min-height: 94%;
		/* background-color: darkslategrey; */
	}

	.c2content {
		width: 100%;
		height: 16%;
		display: flex;
		align-items: center;
		gap: 50rpx;
		margin-bottom: 20rpx;
		background-color: gainsboro;
	}

	.cml {
		margin-left: 24rpx;
	}

	.ch2 {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.cText {
		display: flex;
		flex-direction: column;
	}

	.cT1 {
		color: darkgray;
	}

	.vt3 {
		background-color: darkgray;
		border-radius: 10px;
		margin-top: 10rpx;
		text-align: center;
		color: aliceblue;
	}

	.cIT{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.CITtext{
		background-color: dimgray;
		font-size: 22rpx;
		margin-top: -10rpx;
		color: white;
	}
</style>